<template>
  <div class="contain-edit">
    <div class="header">
      <p>退租管理/查看详情</p>
      <el-button class="link" type="primary">
        <router-link :to="`/${from}`" style="color: #fff;" v-if="from">返回</router-link>
        <router-link to="/rentalbackList" style="color: #fff;" v-else>返回</router-link>
      </el-button>
    </div>
    <div class="main">
      <div class="list" v-if="type == 'day_rental'">
        <div class="title">退租信息</div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">租客:</div>
            <div class="item-value">{{ info && info.renterName ? info.renterName : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">小区:</div>
            <div class="item-value">{{ info && info.gardenName ? info.gardenName : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">单元:</div>
            <div class="item-value">{{info && info.unitName ? info.unitName : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">楼栋:</div>
            <div class="item-value">{{ info && info.buildName ? info.buildName : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">楼层:</div>
            <div class="item-value">{{ info && info.floor ? info.floor : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">房间:</div>
            <div class="item-value">{{ info && info.roomId ? info.roomId : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">租金:</div>
            <div class="item-value">{{ info && info.rental && info.rental.rentalRentprice ? info.rental.rentalRentprice : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">押金:</div>
            <div class="item-value">{{ info && info.rental && info.rental.rentalDeposit ? info.rental.rentalDeposit : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">房东应付:</div>
            <div class="item-value">{{ info.rentalTotalFee - info.renterActualFee}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">租客应付:</div>
            <div class="item-value">{{ info && info.renterActualFee ? info.renterActualFee : '0'}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">总计:</div>
            <div class="item-value">{{ info && info.rentalTotalFee ? info.rentalTotalFee : '--'}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">时间:</div>
            <div class="item-value">{{ info && info.gmtCreated ? info.gmtCreated : ''}}</div>
          </div>
        </div>
      </div>
      <div class="list" v-else>
        <div class="title">退租信息</div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">租客:</div>
            <div class="item-value">{{ info && info.renterName ? info.renterName : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">小区:</div>
            <div class="item-value">{{ info && info.gardenName ? info.gardenName : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">单元:</div>
            <div class="item-value">{{info && info.unitName ? info.unitName : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">楼栋:</div>
            <div class="item-value">{{ info && info.buildName ? info.buildName : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">楼层:</div>
            <div class="item-value">{{ info && info.floor ? info.floor : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">房间:</div>
            <div class="item-value">{{ info && info.roomId ? info.roomId : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">租金:</div>
            <div class="item-value">{{ info && info.rental && info.rental.rentalRentprice ? info.rental.rentalRentprice : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">押金:</div>
            <div class="item-value">{{ info && info.rental && info.rental.rentalDeposit ? info.rental.rentalDeposit : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">水价:</div>
            <div class="item-value">{{ info && info.rental && info.rental.rentalWaterprice ? info.rental.rentalWaterprice : ''}}</div>
          </div>
          <!--<div class="item flex">-->
            <!--<div class="item-key">水费:</div>-->
            <!--&lt;!&ndash;<div class="item-value">{{ info && info.rental. ? info.waterPrice : ''}}</div>&ndash;&gt;-->
          <!--</div>-->
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">上月水量:</div>
            <div class="item-value">{{ info && info.lastWaterReadouts ? info.lastWaterReadouts : '0'}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">本月水量:</div>
            <div class="item-value">{{ info && info.rental && info.rental.rentalWaterreadouts ? info.rental.rentalWaterreadouts : '0'}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">电价:</div>
            <div class="item-value">{{ info && info.rental && info.rental.rentalElectricprice ? info.rental.rentalElectricprice : ''}}</div>
          </div>
          <!--<div class="item flex">-->
            <!--<div class="item-key">电费:</div>-->
            <!--<div class="item-value">{{ info && info.electricPrice ? info.electricPrice : ''}}</div>-->
          <!--</div>-->
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">上月电量:</div>
            <div class="item-value">{{ info && info.lastElectricReadtous ? info.lastElectricReadtous : '0'}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">本月电量:</div>
            <div class="item-value">{{ info && info.rental && info.rental.rentalElectricreadouts ? info.rental.rentalElectricreadouts : '0'}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <!--<div class="item flex">-->
            <!--<div class="item-key">卫生费:</div>-->
            <!--<div class="item-value">{{ info && info.rental && info.rental.healthFee ? info.rental.healthFee : ''}}</div>-->
          <!--</div>-->
          <!--<div class="item flex">-->
            <!--<div class="item-key">保洁费:</div>-->
            <!--<div class="item-value">{{ info && info.rental && info.rental.cleaningFee ? info.rental.cleaningFee : ''}}</div>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="flex-box-container">-->
          <!--<div class="item flex">-->
            <!--<div class="item-key">燃气费:</div>-->
            <!--<div class="item-value">{{ info && info.rental && info.rental.gasFee ? info.rental.gasFee : ''}}</div>-->
          <!--</div>-->
          <!--<div class="item flex">-->
            <!--<div class="item-key">物业费:</div>-->
            <!--<div class="item-value">{{ info && info.rental && info.rental.managementFee ? info.rental.managementFee : ''}}</div>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="flex-box-container">-->
          <!--<div class="item flex">-->
            <!--<div class="item-key">宽带费:</div>-->
            <!--<div class="item-value">{{ info && info.rental && info.rental.internetFee ? info.rental.internetFee : ''}}</div>-->
          <!--</div>-->
          <div class="item flex" v-if="info && info.rental && info.rental.rentalOtherfeeitem">
            <div class="item-key">{{info.rental.rentalOtherfeeitem}}:</div>
            <div class="item-value">{{ info && info.otherFee ? info.otherFee : '0'}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">房东应付:</div>
            <div class="item-value">{{ info.rentalTotalFee - info.renterActualFee}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">租客应付:</div>
            <div class="item-value">{{ info && info.renterActualFee ? info.renterActualFee : '0'}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">总计:</div>
            <div class="item-value">{{ info && info.rentalTotalFee ? info.rentalTotalFee : '0'}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">时间:</div>
            <div class="item-value">{{ info && info.gmtCreated ? info.gmtCreated : ''}}</div>
          </div>
        </div>
      </div>
      <!--<el-form :model="readouts" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="border: 1px solid #dedede;margin-top: 20px;">-->
        <!--<el-form-item label="水表读数" prop="waterReadouts">-->
          <!--<el-input v-model.number="readouts.waterReadouts" placeholder="请输入水表读数"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="电表读数" prop="electricReadouts">-->
          <!--<el-input v-model.number="readouts.electricReadouts" placeholder="请输入电表读数"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="杂费" prop="otherFee">-->
          <!--<el-input v-model.number="readouts.otherFee" placeholder="请输入杂费"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="备注说明" prop="meno">-->
          <!--<el-input v-model="readouts.meno" placeholder="请输入"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="请签字" prop="landlordSignKey">-->
          <!--<Canvas :signKey="signKey" @getSignKey="getSignKey"></Canvas>-->
        <!--</el-form-item>-->
        <!--<el-form-item style="padding-top: 20px;">-->
          <!--<el-button @click="handleClose">取 消</el-button>-->
          <!--<el-button type="primary" @click="handleSureReadouts('ruleForm')">确 定</el-button>-->
        <!--</el-form-item>-->
      <!--</el-form>-->
      <div v-if="confirm && identify == 0" style="margin-top: 20px;text-align: center">
        <!--<el-button @click="handleConfirm" type="primary" size="medium" v-if="type == 'day_rental'">确认退租</el-button>-->
        <el-button @click="dialogVisible1 = true" type="primary" size="medium">确认退租</el-button>
      </div>
    </div>

    <el-dialog
      title="设置水电费"
      :visible.sync="dialogVisible1"
      :before-close="handleClose"
    >
      <div>
        <el-form :model="readouts" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <div v-if="type != 'day_rental'">
            <el-form-item label="水表读数" prop="waterReadouts">
              <el-input v-model.number="readouts.waterReadouts" placeholder="请输入水表读数"></el-input>
            </el-form-item>
            <el-form-item label="电表读数" prop="electricReadouts">
              <el-input v-model.number="readouts.electricReadouts" placeholder="请输入电表读数"></el-input>
            </el-form-item>
            <el-form-item label="杂费" prop="otherFee">
              <el-input v-model.number="readouts.otherFee" placeholder="请输入杂费"></el-input>
            </el-form-item>
            <el-form-item label="备注说明" prop="meno">
              <el-input v-model="readouts.meno" placeholder="请输入"></el-input>
            </el-form-item>
          </div>

          <el-form-item label="请签字" prop="landlordSignKey">
            <Canvas :signKey="signKey" @getSignKey="getSignKey"></Canvas>
          </el-form-item>
          <el-form-item style="padding-top: 20px;">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleSureReadouts('ruleForm')">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  let CONSTANT = require('../../constant/constant.js');
  let common = require("../../common.js");

  export default {
    data() {
      return {
        id:'',
        signKey: "",
        info: {

        },
        dialogVisible1: false,
        type: "",
        confirm: "",
        identify: "",
        from: "",
        readouts: {
          waterReadouts: "",
          electricReadouts: "",
          otherFee: "",
          meno: "",
          landlordSignKey: ""
        },
        rules: {
          waterReadouts: [
            {required: true, message: '请输入水表读数', trigger: 'blur'},
            {type: 'number', message: '水表读数必须为数字值'}
          ],
          electricReadouts: [
            {required: true, message: '请输入电表读数', trigger: 'blur'},
            {type: 'number', message: '电表读数必须为数字值'}
          ],
          otherFee: [
            {required: true, message: '请输入杂费', trigger: 'blur'},
            {type: 'number', message: '杂费必须为数字值'}
          ],
          landlordSignKey: [
            {required: true, message: '请签字', trigger: 'blur'},
          ]
        }
      }
    },
    components: {
      'Canvas': () => import("../common/Canvas"),
    },
    mounted() {
      this.id  = this.$router.currentRoute.query.id;
      this.type = this.$router.currentRoute.query.type;
      if (this.$router.currentRoute.query.from) {
        this.from = this.$router.currentRoute.query.from
      }
      if (this.$router.currentRoute.query.confirm) {
        this.confirm = this.$router.currentRoute.query.confirm;
      }
      this.identify = sessionStorage.getItem("identify")
      this.getDetail(this.id);
    },
    methods: {
      getDetail(id){
        let url = this.identify == 1 ? CONSTANT.URL.RENTALBACK.DETAIL : CONSTANT.URL.L_RENTALBACK.DETAIL
        let param = {
          id:id
        };
        common.requestAjax(url,{},param,(res)=>{
          this.loading = false;
          this.info = res.data.bussData;
        })
      },
      handleClose(done) {
        this.dialogVisible1 = false
        this.readouts = {
          waterReadouts: "",
          electricReadouts: "",
          otherFee: ""
        }
      },
      handleConfirm() {
        let url = CONSTANT.URL.L_RENTALBACK.CONFIRM;
        common.requestAjax(url, {}, {id: this.id}, (data) => {
          if (data.status == 200) {
            this.$message({
              type: "success",
              message: data.msg
            })
            this.$router.back()
          }
        })
      },
      handleSureReadouts(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url = CONSTANT.URL.L_RENTALBACK.CONFIRM;
            if (this.type == "day_rental") {
              this.readouts = {
                waterReadouts: 0,
                electricReadouts: 0,
                otherFee: 0,
                meno: "",
                landlordSignKey: this.readouts.landlordSignKey
              }
            }
            let params = Object.assign({id: this.id}, this.readouts)
            common.requestAjax(url, {}, params, (data) => {
              if (data.status == 200) {
                this.$message({
                  type: "success",
                  message: data.msg
                })
                this.dialogVisible1 = false
                this.readouts = {
                  waterReadouts: "",
                  electricReadouts: "",
                  otherFee: ""
                }
                if (this.from) {
                  this.$router.push("/"+this.from);
                } else {
                  this.$router.push("/rentalbackList");
                }
              }
              if (data.status == 500) {
                this.$message({
                  type: "warning",
                  message: data.msg
                })
              }
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getSignKey(e) {
        this.readouts.landlordSignKey = e
      }
    },
  }
</script>
<style lang="scss" scoped>
  .item-left {
    float: left;
    width: 120px;
    padding-left: 20px;
    padding-right: 10px;
    // height: 40px;
    line-height: 40px;
    text-align: right;
    border-right: 1px solid #dedede;
  }
  .item-right {
    // height: 40px;
    // line-height: 40px;
    padding-left: 20px;
    float: left;
  }
  .backage {
    height: auto;
    border: 1px solid #dedede;
    border-top: none;
  }
  .analyse{
    margin-left: 151px;
    height:530px;
    padding-top: 20px;
    display: flex;
  }
  .pic{
    width:330px;
    height:530px;
    // background-color:yellowgreen;
    display: inline-block;
    margin-right: 30px;
    padding-left: 20px;
    .avatar-info{
      .avatar{
        width:100px;
        height:100px;
        background-color:#626262;
        margin-top:50px;
        border-radius:50%;
        float:left;
        .avatar-img{
          width: 100%;
          height: 100%;
        }
      }
      .info{
        // float:left;
        // margin-top:50px;
        margin-left:10px;
        padding: 60px 20px;
      }
    }
  }
  .pic-font{
    border-left: 5px solid #999;
    width: 100px;
    height: 40px;
    line-height: 40px;
    // background-color: pink;
    // margin-left: 15px;
    margin-bottom: 15px;
    display: block;
  }
  .wins{
    display: inline-block;
    height: 350px;
    flex: 1;
  }
  .match{
    list-style:none;
    padding-left:20px;
    margin-top:20px;
    .match-item{
      width: 300px;
      height:50px;
      background-color: #eee;
      margin-bottom:30px;
    }
  }
  #chart{
    width:300px;
    height:300px;
  }
  .honor {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 20px;
    // background-color: yellow;
    .honor-img{
      width: 70px;
      height: 70px;
      padding: 30px 40px 0px 40px;
    }
    .honor-span{
      width: 40px;
      height: 20px;
      border: 1px solid #ccc;
      display: block;
      margin-left: 55px;
    }
    .honor-text{
      display: block;
      text-align: center;
      font-size: 14px;
    }
  }

</style>


